import React, { Component } from "react";

export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      message: "Hello World",
      name: 'CoderG'
    }
  }
  render() {
    return (
      <div>
        <h2>{this.state.message}</h2>
        <h2>{this.state.name}</h2>
        <button onClick={e => this.changeText()}>改变文本</button>
      </div>
    )
  }
  changeText() {
    this.setState({
      message: "你好啊,lyh"
    })
    const res = Object.assign({}, this.state, { message: "你好啊,李银河" })
    console.log(res, '-----');
  }
}

// setState批量更新
// 除了 虚拟DOM 外，减少更新频率的另一个手段就是React的批量更新。
// 顾名思义，批量处理就是，可以避免短期内的多次渲染，攒为一次更新。


// 除了事件处理函数会执行canMerge逻辑，在执行componentDidMount前后也会有canMerge逻辑，
// 可以理解为：React委托代理了所有的事件，在执行你的函数/componentDidMount之前，会执行React逻辑，
// 这样React也是有时机执行canMerge逻辑的。
